<template>
  
  <div class="person">
    <h2>一辆 {{ car.brand }}车 价值: {{ car.price }}</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <hr>
    <h2>当前的和是: {{ sum }}</h2>
    <button @click="changeSum">点我和+1</button>
    <button @click="changeCar">点我直接给你换车</button>
    <hr>
    <h2>姓名: {{ person.name }}</h2>
    <h2>年龄: {{ person.age }}</h2>
    <button @click="changePerson">点我直接给你换人</button>
  </div>


</template>

<script setup lang="ts" name = 'FindYou'> // 相当于写了setup() {}
import {ref, reactive} from 'vue'

// ----------------------对象类型的响应式数据------------------------------

//数据
let car = reactive({
  brand: '奔驰',
  price: 100
})

let person = ref({
  name: '贾金博',
  age: 20
})

let sum = ref(0)

function changePrice() {
  car.price += 10
}

function changeSum() {
  sum.value += 1
  
}

function changeCar() {
  Object.assign(car, {brand: '什么车', price: '多少钱'})
}

function changePerson() {
  //一个一个的改太麻烦了
  // person.value.name = 'FindYou'
  // person.value.age += 1
  person.value = {name: 'FindYou', age: 22}
}
</script>



<style scoped >
.person {
  background-color: pink;
}
button {
  margin: 0 5px;
}
</style>